import {useState} from 'react'
import './index.css'

export default function Item(props) {
  const [mouseEnter, setMouseEnter] = useState(false)
  const {todo} = props

  function mouseState(flag) {
    setMouseEnter(flag)
  }

  function handleChange(id, event) {
    props.changeTodo(id, event.target.checked)
  }

  function handleDelete(id) {
    props.deleteTodo(id)
  }

  return (
    <li onMouseEnter={() => mouseState(true)} onMouseLeave={() => mouseState(false)}>
      <label>
        <input type="checkbox" checked={todo.done} onChange={e => handleChange(todo.id, e)}/>
        <span>{todo.name}</span>
      </label>
      <button onClick={() => handleDelete(todo.id)} className="btn btn-danger" style={{display: mouseEnter ? 'block' : 'none'}}>删除
      </button>
    </li>
  )
}
